<template>
  <div class="box">
    <div class="left">
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
        :label-position="labelPosition"
      >
        <el-form-item label="缴费人员">
          <el-input
            v-model="form.username"
            placeholder="输入缴费人员"
          ></el-input>
        </el-form-item>
        <el-form-item label="缴费名称">
          <el-input
            v-model="form.payname"
            placeholder="输入缴费项目/名称"
          ></el-input>
        </el-form-item>

        <el-form-item label="支付类型">
          <el-select
            v-model="form.costtype"
            placeholder="输入支付类型"
            style="width: 100%"
          >
            <el-option label="支付宝支付" :value="1"></el-option>
            <el-option label="微信支付" :value="2"></el-option>
            <el-option label="银联支付" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支付状态">
          <el-select
            v-model="form.coststatus"
            placeholder="选择支付状态"
            style="width: 100%"
          >
            <el-option label="已支付" :value="1"></el-option>
            <el-option label="未支付" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支付时间">
          <el-date-picker
            v-model="form.date"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 100%"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="缴费金额">
          <el-input
            v-model="form.paymoney"
            placeholder="输入缴费金额"
          ></el-input>
        </el-form-item>
        <el-form-item v-if="flag" label="缴费优先级">
          <el-input
            v-model="form.paylevel"
            placeholder="输入缴费优先级"
          ></el-input>
        </el-form-item>
        <div>
          <p v-if="!flag">
            <i class="el-icon-arrow-down"></i>
            <span @click="flag = !flag">更多</span>
          </p>
          <p v-if="flag">
            <i class="el-icon-arrow-up"></i>
            <span @click="flag = !flag">收起</span>
          </p>
        </div>
        <el-form-item>
          <div class="btn">
            <el-button style="width: 46%" @click="reset">重置</el-button>
            <el-button type="primary" style="width: 46%" @click="refer"
              >立即查询</el-button
            >
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="right">
      <div class="top">
        <h1>缴费列表</h1>
        <el-button type="primary" icon="el-icon-download" @click="look('ok')"
          >导出</el-button
        >
      </div>
      <div class="out">
        <el-table
          :data="tableData"
          style="width: 100%; margin-top: 20px"
          border
          height="470"
          stripe
          v-loading="loading"
        >
          <el-table-column
            prop="payname"
            label="缴费产品"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="username"
            label="缴费人员"
            align="center"
            :formatter="people"
          >
          </el-table-column>
          <el-table-column
            prop="costtype"
            label="支付类型"
            align="center"
            :formatter="money"
          >
          </el-table-column>
          <el-table-column prop="paymoney" label="缴费金额" align="center">
          </el-table-column>
          <el-table-column prop="paylevel" label="缴费优先级" align="center">
          </el-table-column>
          <el-table-column
            prop="costtime"
            label="支付时间"
            align="center"
            :formatter="datatimes"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="coststatus"
            label="支付状态"
            align="center"
            :formatter="state"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作"
            align="center"
            min-width="210"
          >
            <template slot-scope="scope">
              <el-button plain @click="look2(scope.row)">查看</el-button>
              <el-button type="primary" plain @click="look(scope.row)"
                >导出</el-button
              >
              <el-button type="danger" plain @click="del(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="botpage">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 50, 100]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import * as XLSX from "xlsx";
export default {
  data() {
    return {
      flag: false,
      form: {},
      form2: {},
      labelPosition: "top",
      loading: false,
      tableData: [],
      total: 0,
      pagesize: 10,
      currentPage: 1,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 时间格式化
    datatime() {},
    // 内容状态格式化
    state() {},
    // 基础数据接口
    async getList() {
      this.loading = true;
      await this.$axios
        .get("/cost/getPayMessage", {
          params: {
            currPage: this.currentPage - 1,
            pageNum: this.pagesize,
          },
        })
        .then((res) => {
          console.log(res);
          this.tableData = res.data.data;
          this.total = res.data.total;
          this.loading = false;
        });
    },
    // 缴费人员格式化
    people(a, b, c) {
      if (c) {
        return c;
      } else {
        return "暂无";
      }
    },
    // 支付方式格式化
    money(a, b, c) {
      if (c == 1) {
        return "支付宝支付";
      } else if (c == 2) {
        return "微信支付";
      } else if (c == 3) {
        return "银联支付";
      } else {
        return "暂无";
      }
    },
    // 支付状态格式化
    state(a, b, c) {
      if (c == 1) {
        return "已支付";
      } else if (c == 2) {
      }
    },
    // 支付时间格式化
    datatimes(a, b, c) {
      if (c) {
        return moment(c).format("YYYY-MM-DD HH:mm:ss");
      } else {
        return "暂无";
      }
    },
    // 支付格式化
    state(a, b, c) {
      if (c == 1) {
        return "已支付";
      } else {
        return "未支付";
      }
    },
    // 单个&整体导出
    look(row) {
      if (row != "ok") {
        var tableData = [row];
      } else {
        var tableData = this.tableData;
      }
      // 如果表格数据为空，提示用户
      if (tableData.length === 0) {
        this.$message({
          type: "warning",
          message: "没有数据可以导出！",
        });
        return;
      } // 定义表头

      const headers = [
        "缴费产品",
        "缴费人员",
        "支付类型",
        "缴费金额",
        "缴费优先级",
        "支付时间",
        "支付状态",
      ]; // 将表格数据转换为工作表数据

      const worksheetData = [
        headers, // 第一行为表头
        ...tableData.map((item) => [
          item.payname || "暂无", // 如果为空，填充为“暂无”
          item.username || "暂无",
          item.costtype || "暂无",
          item.paymoney || "暂无",
          item.paylevel || "暂无",
          item.costtime || "暂无",
          item.coststatus == 1 ? "已支付" : "未支付",
        ]),
      ]; // 创建工作表

      const worksheet = XLSX.utils.aoa_to_sheet(worksheetData); // 创建工作簿

      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1"); // 导出 Excel 文件

      XLSX.writeFile(workbook, "数据列表.xlsx"); // 提示导出成功

      this.$message({
        type: "success",
        message: "导出成功！",
      });
    },
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
      if (this.form2) {
        this.refer2();
      } else {
        this.getList();
      }
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      if (this.form2) {
        this.refer2();
      } else {
        this.getList();
      }
    },
    // 查询按钮
    refer() {
      this.form2 = JSON.parse(JSON.stringify(this.form));
      this.currentPage = 1;
      this.refer2();
    },
    // 查询接口
    async refer2() {
      this.loading = true;
      await this.$axios
        .get("/cost/getPayMessage", {
          params: {
            ...this.form2,
            currPage: this.currentPage - 1,
            pageNum: this.pagesize,
          },
        })
        .then((res) => {
          console.log(res);
          this.tableData = res.data.data;
          this.total = res.data.total;
          this.loading = false;
        });
    },
    // 重置按钮
    reset() {
      this.form = {};
      this.form2 = {};
      this.getList();
    },
    // 删除
    del(row) {
      //   console.log(row);
      this.$confirm("确定删除该支付信息?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await this.$axios
            .get("/cost/delCostData", {
              params: {
                id: row.id,
                token: sessionStorage.getItem("token"),
              },
            })
            .then((res) => {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getList();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 页面跳转查看
    look2(row) {
      this.$router.push({
        path: "/pay/payDetail",
        query: {
          id: row.id,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  justify-content: space-between;
  .left {
    width: 23%;
    height: 550px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid #cccccc48;
    border-radius: 5px;
    div {
      p {
        text-align: center;
        color: #409eff;
        margin-top: 10px;
        span {
          cursor: pointer;
        }
      }
    }
    .btn {
      display: flex;
      justify-content: center;
      margin-top: 10px;
    }
  }
  .right {
    width: 70%;
    padding: 25px 20px 20px 30px;
    height: 580px;
    overflow-y: auto;
    border: 1px solid #cccccc48;
    border-radius: 5px;
    .top {
      display: flex;
      justify-content: space-between;
    }
    .botpage {
      display: flex;
      justify-content: flex-end;
    }
  }
}
.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 0px;
}
::v-deep .el-table .has-gutter tr th {
  background: rgb(238, 241, 246);
  color: rgb(31, 45, 61);
  border-color: rgb(223, 230, 236);
  font-size: 14px;
  text-align: center;
}
::v-deep .el-table--small .el-table__cell {
  padding: 4px 0;
}
.el-button--primary.is-plain,
.out .el-button--primary {
  background-color: #ffffff00;
}
.el-button--primary.is-plain:focus,
.el-button--primary.is-plain:hover {
  color: #409eff;
}
.el-button--danger.is-plain,
.el-button--danger.is-plain {
  background-color: #ffffff00;
}
.el-button--danger.is-plain:focus, .el-button--danger.is-plain:hover{
  color: #F56C6C;
}
</style>